<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- html5 是很多新特性 是低版本ie浏览器（ie6,ie7,ie8） 不支持的 -->
  <!-- 1.autocomplete  表单的自动验证 默认为真
    on 打开自动验证
    off 关闭自动验证 
  -->
  <!-- 2.  placeholder 输入提示-->
  <!-- 3.required 必填项
   -->
   <!-- 4. pattern 给表单控件添加正则规则
  -->
  <!-- 
      5.autofocus 表单控件 自动获取焦点
   -->
   <!-- 
     action 提交地址 后台服务器地址
     method 提交方式 get  post 
    -->
  <form action="http://www.baidu.com" method="get"  autocomplete="off" >
    <!-- 正则的属性 -->
    手机号：<input type="text" autofocus pattern="^1[3|5|6|7|8|9]\d{9}$">
    <br>
    <!-- 输入框 -->
    <input type="text" required>
    <br>
    <!-- number 数字框 -->
    <input type="number" required placeholder="请输入年龄">
    <br>
    <!-- range滑轨 value当前值 -->
    <input type="range" max="100" min="0" value="20" />
    <br>
    <!-- 颜色框 color-->
    <input type="color" onchange="getColor(this)">
    <br>
    邮箱：<!-- 邮箱 email -->
    <input type="email">
    <br>
    <!-- 电话 tel-->
     电话：<input type="tel">
    <br>
    <!-- 日期 date -->
    <input type="date">
    <br>
    <!-- 星期 week -->
    星期： <input type="week">
    <br>
    <!-- 网址url -->
    网址：<input type="url">
    <br>
    <!-- time 时间 -->
    时间：<input type="time" />
    <!-- 月份 month -->
    月份：<input type="month" />
    <br>
    <!-- 可以关联数据的输入框  datalist 类型 -->
    datalist:<input list="cars"  />
    <datalist id="cars">
      <option value="兰博基尼"></option>
      <option value="宾利"></option>
      <option value="保时捷"></option>
      <option value="宝马"></option>
      <option value="奔驰"></option>
    </datalist>
    <br>
    <!-- 点击提交按钮 
    html5 会自动校验html5的表单控件 -->
    <input type="submit" value="提交">
  </form>
  <!-- 对话框 -->
  <dialog id="mydia" >
     我是一个对话框
     <dl>
       <dd>吃了吗</dd>
       <dt>睡了吗</dt>
     </dl>
  </dialog>  
  <button onclick="openAndClose()">打开或关闭</button>
  <script>
      function getColor(that){
          console.log(that.value)
      }
      // 打开关闭对话框
      function openAndClose(){
        // 获取对话框
          var mydia=document.querySelector("#mydia");
          // 如果元素身上有open属性
          if(mydia.getAttribute("open")){
            mydia.removeAttribute("open") //移除open属性
          }else{
            mydia.setAttribute("open","open"); //添加open属性
          }
      }
  </script>
</body>
</html>